<template>
  <el-container class="user_container flex">
    <el-main class="user_main flex-1">
      <Breadcrumb :title="pageTitle" />
      <div class="user_content flex main_content">
        <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between" size="small">
          <div class="search">
            <el-form-item prop="status">
              <el-select v-model="searchMap.status" placeholder="状态" clearable>
                <el-option v-for="item in dict.type.device_brand_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item prop="">
                            <el-select v-model="searchMap.deviceTypeValue" placeholder="项目点类型">
                                <el-option v-for="item in deviceType" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item prop="deviceBrandName" style="width: 120px">
              <el-input v-model="searchMap.deviceBrandName" placeholder="关键词搜索"></el-input>
            </el-form-item>
            <el-form-item class="flex">
              <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
            </el-form-item>
          </div>
          <div class="edit">
            <el-form-item class="flex">
              <!-- <el-button @click="" class="btn_primary" icon="el-icon-plus">
                                批量导入
                            </el-button> -->
              <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus">
                新增
              </el-button>
            </el-form-item>
          </div>

        </el-form>
        <!-- 表格 -->
        <transition name="fade">
          <el-table :data="BrandList" stripe class="per_table" style="width: 100%">
            <el-table-column prop="deviceBrandPics" align="center" label="品牌LOGO">
              <template slot-scope="scope">
                <div class="imgBox">
                  <div class="block">
                    <el-image style="width: 80px; height: 80px" :src="scope.row.deviceBrandPics"></el-image>
                  </div>
                </div>
              </template>
            </el-table-column>projectName
            <el-table-column prop="deviceBrandName" align="center" label="品牌名称"></el-table-column>
            <el-table-column prop="deviceBrandCode" align="center" label="品牌编码">
            </el-table-column>
            <el-table-column prop="deviceBrandCompany" align="center" label="所属公司">
            </el-table-column>
            <el-table-column prop="deviceBrandContacts" align="center" label="联系人"></el-table-column>
            <el-table-column prop="contactsPhone" align="center" label="联系电话"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注 "></el-table-column>
            <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <template v-for="item in dict.type.device_brand_status">
                  <div class="status-content" v-if="scope.row.status == item.value" :key="item.value">
                    <span :class="'status-radius-' + item.value"></span>
                    <span :class="'status-label-' + item.value">{{ item.label }}</span>
                  </div>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <div class="button-group">
                  <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
                  <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row, 'delect')">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </transition>
        <div class="content_footer">
          <el-pagination v-show="total>0" :total="total" :page-sizes="[10, 20]" @current-change="initUserList" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" :page-size="searchMap.pageSize" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </el-main>
    <div class="dialog_content">
      <el-dialog class="m_dialog" title="设备品牌" :visible.sync="userDialogVisible" append-to-body :close-on-click-modal="false" destroy-on-close :key="Math.random()">
        <div class="content">
          <custom-form ref="addUserFrom" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="120px" label-position="left" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="userDialogVisible = false" class="btn_cancel">取 消</el-button>
          <el-button type="primary" @click="submitFrom('addUserFrom')" class="btn_primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-container>
</template>
<script>

import { addDeviceBrand, updateDeviceBrand, getDeviceBrandList, getDeviceBrand, delDeviceBrand, getProjectPointTypeList } from '@/api'
export default {
  name: 'DeviceBrand',
  dicts: ['device_brand_status'],
  data () {
    return {
      dataState: 0,
      // 遮罩层
      loading: true,
      // 品牌图片列表
      BrandList: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 总条数
      total: 0,
      // 搜索参数
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        // 设备类型值
        // deviceTypeValue:undefined,
        // 设备状态值
        status: undefined,
        // 搜索框
        deviceBrandName: undefined,
      },
      dictList: [],
      // 项目点类型
      // deviceType: [],
      // 弹出框状态
      userDialogVisible: false,
      // 提交表单数据
      formModel: {
        // 设备品牌Logo
        deviceBrandPics: undefined,
        // 设备品牌名称
        deviceBrandName: undefined,
        // 设备品牌所属公司
        deviceBrandCompany: undefined,
        // 设备品牌联系人
        deviceBrandContacts: undefined,
        // 设备品牌编码
        deviceBrandCode: undefined,
        // 设备品牌联系人电话
        contactsPhone: undefined,
        // 状态（0有效 1无效 2演示 3勿扰）
        status: undefined,
        // 备注
        remark: undefined,
        deviceBrandId: undefined
        // postIds: [],
        // roleIds: []
      },
      // 表单配置项
      formItemConfig: [
        {
          label: 'LOGO图片',
          picUrl: '',
          prop: 'deviceBrandPics',
          component: 'BaseUpload',
          formType: 'basicInformation',
          span: 24,
          clearable: true,
          width: '100%',
          limit: 10,
          change(e){
            console.log('LOGO图片', e)
          }
        },
        {
          label: '品牌名称',
          prop: 'deviceBrandName',
          span: 24,
          hidden: false,
          width: '100%',
        },
        {
          label: '品牌编码',
          prop: 'deviceBrandCode',
          span: 24,
          hidden: false,
          width: '100%',
        },
        {
          label: '所属公司名称',
          prop: 'deviceBrandCompany',
          hidden: false,
          span: 24,
          width: '100%',
        },
        {
          label: '联系人',
          prop: 'deviceBrandContacts',
          hidden: false,
          span: 24,
          width: '100%',
        },
        {
          label: '联系电话',
          prop: 'contactsPhone',
          hidden: false,
          span: 24,
          width: '100%',
        },
        {
          label: '状态',
          prop: 'status',
          component: "BaseRadioGroup",
          span: 24,
          width: '100%',
          options: [
            // {
            //   label: '有效',
            //   value: '0',
            // },
            // {
            //   label: '无效',
            //   value: '1',
            // },
            // {
            //   label: '演示',
            //   value: '2',
            // },
            // {
            //   label: '勿扰',
            //   value: '3',
            // }
          ],
        },
        {
          label: '备注',
          prop: 'remark',
          row: 4,
          type: 'textarea',
          span: 24,
          width: '100%',
        },
      ],
      // 表但验证
      formRules: {
        deviceBrandName: {
          required: true,
          message: '品牌名称不能为空',
          trigger: 'blur',
        },
        deviceBrandContacts: {
          required: true,
          message: '联系人名称不能为空',
          trigger: 'blur',
        },
        deviceBrandCode: {
          required: true,
          message: '品牌编号不能为空',
          trigger: 'blur',
        },
        status: {
          required: true,
          message: '请选择一个状态',
          trigger: 'blur',
        },
        contactsPhone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          },
          {
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur',
          }
        ]
      },
    }
  },
  created () {
    this.formItemConfig = this.formItemConfig.map(item => {
      if (item.prop === 'status') {
        item.options = this.dict.type.device_brand_status
      }
      return item
    })
    this.initUserList()
    // 初始化项目类型下拉框
    //  this.getTypeSelect()
  },
  methods: {
    getTypeSelect () {
      getProjectPointTypeList().then(response => {
        let tempArr = []
        const resp = response
        for (const item of resp.data) {
          tempArr.push({
            label: item.projectPointTypeName,
            value: item.projectPointTypeId
          })
        }
        this.deviceType = tempArr
      })
    },
    // tableRowClassName ({ row, rowIndex }) {
    //   if (rowIndex % 2 === 0) {
    //     return 'success-row' //这是类名
    //   } else {
    //     return ''
    //   }
    // },
    // 重置表单数据
    resetForm () {
      this.formModel = {
        // 设备品牌Logo
        deviceBrandPics: undefined,
        // 设备品牌名称
        deviceBrandName: undefined,
        // 设备品牌所属公司
        deviceBrandCompany: undefined,
        deviceBrandContacts: undefined,
        // 设备品牌编码
        deviceBrandCode: undefined,
        // 设备品牌联系人电话
        contactsPhone: undefined,
        // 状态（0有效 1无效 2演示 3勿扰）
        status: undefined,
        // 备注
        remark: undefined,
        deviceBrandId: undefined
        // postIds: [],
        // roleIds: []
      };
    },
    // 加载数据
    initUserList () {
      this.loading = false
      getDeviceBrandList(this.searchMap).then(response => {
        // const resp = response.data
        this.BrandList = response.rows
        this.total = response.total
      })
    },
    // 根据条件查询
    handleSearch () {
      this.searchMap.pageNum = 1
      this.initUserList();
    },
    //重置搜索栏数据
    handleReset () {
      this.$refs['searchMap'].resetFields()
      this.handleSearch()
    },
    // 修改数据
    handleEdit (row) {
      this.resetForm()
      const brandId = row.deviceBrandId
      getDeviceBrand(brandId).then(res => {
        if(res && 200 == res.code){
          this.userDialogVisible = true
          this.formItemConfig.forEach(item => {
            if (item.prop === 'deviceBrandPics') {
              item.picUrl = res.data.deviceBrandPics
            }
          })
          console.log(this.formItemConfig)
          // this.formModel = res.data
          this.postOptions = res.data.posts;
          this.formModel = res.data
        }
      });
    },
    // 新增设备品牌信息
    handleAdd () {
      this.resetForm()
      this.userDialogVisible = true
      // addDeviceBrand().then(response => {
      //     const resp = response.data
      //     this.userDialogVisible = true
      //     this.postOptions = resp.posts
      //     this.getpostOptions()
      // });
    },
    // getpostOptions() {
    //     this.formItemConfig.forEach(item => {
    //         if (item.prop === 'postIds') {
    //             item.options = this.postOptions
    //             item.filedLabel = 'postName'
    //             item.filedValue = 'postId'
    //         }
    //     })
    // },
    // 用户状态修改
    handleStatusChange (row) {
      // console.log(row)
      // let text = row.status === "0" ? "启用" : "停用";
      // this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
      //   return changeUserStatus(row.userId, row.status);
      // }).then(() => {
      //   this.$modal.msgSuccess(text + "成功");
      // }).catch(function () {
      //   row.status = row.status === "0" ? "1" : "0";
      // });
    },
    //点击删除
    handleDelete (row) {
      const brandId = [row.deviceBrandId]
      this.$confirm("确认删除这行数据吗？", "提示", {
        configButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delDeviceBrand(brandId).then((response) => {
          this.initUserList()
        });
      })
        .catch(() => {
          console.log("点击了取消");
        });
    },
    submitFrom (form) {
      console.log(this.formModel)
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.formModel)
          if (this.formModel.deviceBrandId !== undefined) {
            updateDeviceBrand(this.formModel).then(response => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.userDialogVisible = false
              this.initUserList()
            })
          } else {
            addDeviceBrand(this.formModel).then(response => {
              const resp = response
              if (resp.code === 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                });
              }
              this.userDialogVisible = false
              this.initUserList()
            })
          }
        }
      })
    },
  },
  computed: {
    pageTitle () {
      return '设备品牌管理'
    },
  }
}
</script>
  
<style lang="less" scoped>
@import url("@/common/elementui.less");

.normal_dialog {
  background: url("@/assets/images/home/content.png") no-repeat;
}

.user_container {
  .user_main {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;

    .user_content {
      display: flex;
      flex-direction: column;
      padding: 15px 20px;
      height: calc(100% - 70px);
      background: url("@/assets/images/home/content.png") no-repeat;
      background-size: cover;

      .content_footer {
        text-align: right;
        height: 32px;
      }
    }
  }

  .dialog_content {
    padding: 5px;
  }
}
</style>